<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>分类的frm页面</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/goods.css" />
    <style type="text/css">
        html,body{width: 100%;height: 100%;background: #fff;}
        #aui-header{height: 50px; line-height: 50px;position: fixed;top:0;width: 100%;
          left: 0;right: 0;background: #fff;z-index: 999;}
       .headerTop{display: flex;flex-wrap: nowrap;justify-content: space-between;
         padding: 5px 15px 5px;align-items: center;}
       .headerTop .searchInput{width: 85%;height: 40px;text-align: center;background: #f6f6f6;
         border-radius: 10px;color: #999999;font-size: 12px;display: flex;flex: auto;align-items: center;}
       .searchInput img{width: 12.5px;height: 12.5px;margin-left: 15px;margin-right: 10px;}
        .goodsCategoryBox{width: auto;height: 100%;margin-left: 90px;}
        header { width: 100%; line-height: 40px;font-size: 16px;
           display: flex;align-items: center;justify-content: center;}
        header div {border-top: 1px solid #a0a0a0;width: 20px;margin: 0 10px;}
        .content ul {padding: 10px 0;font-size: 12px;text-align: center;
           display: flex;flex-wrap: wrap;}
        li {width: 33%;margin-bottom: 25px;}
        li img {width: 1.4rem;height: 1.4rem;margin-bottom: 5px;}
    </style>
</head>
<body>
    <!-- 顶部导航展示 -->
    <div class="aui-bar aui-bar-nav aui-bar-theme" id="aui-header">
        <div class="headerTop">
            <div class="searchInput" tapmode onclick="openSearch()">
                <img src="../../image/home_icon_search_rd.png" alt="">
                <span class="keyword">毛裤</span>
            </div>
            <!-- <div class="news" tapmode onclick="openMessage()">
                <img src="../../image/category_icon_message.png" alt="" tapmode="" onclick="openMessage()">
            </div> -->
        </div>
    </div>
    <!-- 二级分类盒子 -->
    <div class="goodsCategoryBox"></div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript">
var  frames = [];
apiready = function () {
    $api.fixStatusBar($api.dom('#aui-header'));
    //获取商品分类数据(1级分类)
    $api.ajax({
        url: 'api/category/tree',
        method: 'get',
        data: {
            values: {
                pid: 0,
                deep: 1,
            }
        }
    }, function (ret, err) {
        if (ret) {
            ret.data.tree.forEach(item => {
                var frame = {
                    title: item.name,
                    name: item.name,
                    bounces: false,
                    vScrollBarEnabled: false,
                    id: item.id,
                    bg: '#f6f6f6',
                    bgSelected: '#ffffff',
                }
                frames.push(frame);
            })
            // 设置打开左侧分类列表
            NavBar()
          }
    });
}

// 侧边分类导航栏
function NavBar() {
    var NVNavigationBar = api.require('NVNavigationBar');
    NVNavigationBar.open({
        rect: {
            x: 0,
            y: $api.dom('#aui-header').offsetHeight,
            w: 90,
            h: api.frameHeight - $api.dom('#aui-header').offsetHeight
        },
        styles: {
            orientation: 'vertical',
            bg: '#f6f6f6',
            bgAlpha: 1,
            font: {
                size: 14,
                sizeSelected: 15,
                color: '#505050',
                colorSelected: '#ff4c41',
                alpha: 1,
            },
            itemSize: {
                w: 90,
                h: 50,
            }
        },
        items: frames,
        selectedIndex: 0,
        fixedOn:api.frameName,
        id: 'category_main'
    }, function (ret, err) {
        if(ret){
            //切换分类 更换右侧分类数据
            var categoryIndex = 0;
            if(ret.hasOwnProperty("index")){
                categoryIndex = ret.index
            }
            $api.ajax({
                url: 'api/category/tree',
                method: 'get',
                data: {
                    values: {
                        pid: frames[categoryIndex].id,
                    }
                }
            }, function (ret,err) {
                var html_list = '';
                ret.data.tree.forEach(item => {
                    var h_list = '';
                    if (item.sub) {
                        item.sub.forEach(i => {
                            var h = '<li tapmode onclick="openGoods(this)"><img src="' + $api.baseUrl + i.icon + ' "alt=""><div class="">' +
                              i.name +'</div></li>';
                            h_list = h_list + h
                        })
                    }
                    var html = '<header><div></div><span class="title">' + item.name + '</span><div></div></header><div class="content"><ul>'+
                        h_list + '</ul></div>';
                    html_list = html_list + html;
                })
                $api.html($api.dom(".goodsCategoryBox"), html_list);
                $api.dom(".goodsCategoryBox").style.marginTop = $api.dom('#aui-header').offsetHeight + 'px';
                api.parseTapmode();
            })
        }else{
            console.log(JSON.stringify(err))
        }
    });
}

//商品列表
function openGoods(el) {
    api.openTabLayout({
        name: 'cidGoodsList',
        url: './cidGoodsList_win.html',
        useWKWebView: true,
        bgColor: '#fff',
        pageParam: {
            name: $.trim($api.text($api.last(el, "div")))
        }
    });
}

//打开搜索页面
function openSearch(){
    api.openTabLayout({
        name: 'search',
        url: '../home/search_win.html',
        useWKWebView: true,
        bgColor: '#fff',
        allowEdit: true,
    });
}

// 打开消息页面
function openMessage(){
    api.openTabLayout({
        name: 'message_index',
        url: '../home/message_index.html',
        useWKWebView: true,
        bgColor: '#fff',
    });
}
</script>
</html>
